Emmet语法
    输入首个字母，次级首字母

CSS属性书写顺序*
    1.布局定位属性
        display /position /float /clear /visibility /overflow(建议display第一个写)
    2.自身属性
        width /height /margin /padding /border /background
    3.文本属性
        color /font /text-decoration /text-align /vertical-ailgn /white-space /break-word
    4.其他属性（css3）
        content /cursor /border-radius /box-shadow /text-shadow /background: linear-gradient   
    /* 先写结构，再写样式 */
    导航栏不会直接用链接a而是用li 包含a用的
    
CSS三大特性
    层叠性
        相同选择器设置相同的样式，此时一个样式会覆盖掉另一个冲突的样式
        /* 遵循就近原则，哪个样式离结构近就执行哪个样式 */
        /* 样式不冲突的属性不会覆盖 */
    继承性
        子标签继承父标签的某些样式比如颜色和字号
        （text- font- line- color-） 
        行高的继承
        {
            font 12px(size)/1.5(line-height);
            }
        1.5为子元素字号1.5倍大小    
    优先级
        !improtan > 行内样式style=" " > id选择器 > 类，属性，伪类选择器 > 元素，伪元素选择器 > 继承或者*选择器（通用选择器）
        /* a链接浏览器默认制定了一个样式，蓝色的有下划线 */
        /* 继承的权重是0 */
        /* 复合选择器会有权重叠加的问题，不会进位 */
引入方式
    外部样式表 单独建一个CSS文件，之后把CSS文件引入到html
            只有样式，没有标签
            通过标签引入
            <link rel="stylesheet" href=" ">

    内部样式表 将CSS单独放到一个<style>标签

    行内样式表 单独修改一条，修改样式比较少的情况下
        <p style="color: red; font-size= 20px; " >文本内容</P>

选择器
    p {
        color: red ;
        font-family: "微软雅黑"；(字体)
    }
    /* 元素选择器，根据html元素选择，页面上所有<p>元素都被选择 */
    #sadd {
        color: purple;
    }
    /* id选择器，用#后跟该元素id，id是唯一的,只能选择一个唯一元素 */
    .center {
        color: blue;
        font-size: 30px;（字体大小）
    }
    /* .字符后跟类名，标签属性调用class=" "使用，可调用多个类 */
    (类名不能以数字开头，不能纯数字，中文)
      
        * {
            color: yellow;
        }
    /* 通用选择器，影响全局的每个HTML元素，以*开头   */

    <body>
        元素选择器
            <P>wenben</P>
        id选择器
            <div id="sadd">wenben</div>
        类选择器
            <div class="center bbq">wenben</div>
    </body>

字体复合属性
    body {
        font: font-style font-weight font-size font-family
    }
    /* 不能随意颠倒顺序 */
    /* size family不能省略 */
    /* weight  700加粗 normal 400 */
    /* size 单位PX style 倾斜itailc normal */

文本属性
    .wenben {
        text-align: center; /* 文字居中对齐 */
                    /* left right 左对齐右对齐
                        justify 拉伸每一行，使每一行具有相同的宽度，并且左右边距是直线 

                        只在块元素中使用，直接用在内联元素上不生效。
                        会对块元素中的所有内联内容对齐。
                        会对块元素中包含的文本内容生效。
                        在其内的块元素也会对齐是因为子块元素继承父块元素的text-align的属性。*/
                        
        text-decoration: underline;下划线
                        /* overline; 上划线
                        line-through; 删除线 none取消线 */
        text-indent: 2em;
        /* 文本首行缩进 */
        /* em 是一个相对单位为 font-size一个大小 */
        line-height: 20px;
        /* 行间距 */
        行间距等于盒子高度实现文字垂直居中
        white-space: nowrap; 禁止换行
                     wrap; 换行（默认）
    }

复合选择器
    后代选择器
        元素1 元素2{
            color: #000;
        }
        /* 元素1.2为标签 元素1为父级，元素2为子级   只作用与元素2   中间必须空格*/
    子选择器
        只能选择某元素最近一级
        元素1> 元素2{
            color: #000;
        }
    并集选择器
        元素1，
        元素2 {
            color: #000;
        }
        /* 可以选择多组标签，同时做相同定义 */
        /* 任何选择器都可以是并集选择器的一部分 */

    伪类选择器
        链接伪类选择器
        a:link      选择所有未被访问链接
        a:visited   选择所有已被访问链接
        a:hover     选择鼠标指针位于其上链接
        a:active    选择活动链接（按下未弹起的链接）
        /* lvha顺序声明 */
        用于选择器添加特殊效果
    focus 选择器
        input:focus{
            background-color: #fff;
        }
        选择获得光标的表单
元素显示模式
    块元素
        h1 p div ul ol li 
        /* 独占一行 可以设置高，长
        文字类标签不能放块元素 */
    行内元素
        a strong b em i del s ins u span 
        /* 高，长，可以设置
        一行上可以显示多个
        只能容纳文本或其他行内元素 */
    行内块元素
        img input td 
        /* 一行放多个，可以设置宽度和高度 */
    
    .s {
        display: block; 
    }
    行内元素转换为块元素
    .ss {
        display: inline;
    }
    块元素转换为行内元素
    .sss {
        display: inline-block;
    }
    转换为行内块元素

背景
    背景颜色
        background-color: 颜色;
        不写默认为 transparent(透明)  
    背景图片
        background-image: url(填路径);
                          none 无背景;
        开发与常见LOGO或者装饰性的小图片，超大的背景图片
        /* 优点是非常便于控制位置 */
    图片方位
        background-position: x y;
        可以跟方位名词 right center ;/*前后顺序无所谓*/
        跟精确单位先x坐标再y  20px 50px;/*有严格顺序*/
        混合单位 20px center;/*一定是先x，后y有严格顺序*/
    背景平铺
        background-repeat: repeat /no-repeat/repert-x/repeat-y;
        /* -x 沿着x轴平铺 */
        /* -y 沿着y轴平铺 */
        默认情况下背景图片平铺,页面元素可以添加背景图片也可以添加背景颜色
    背景附着
        background-attachment :scoll / fixed;
        默认为scoll背景图像随对象内容滚动
    *背景复合型写法
        合并写在同一个background
        { 
            background: black url() no-repeat fixed top;
            }
        /* 无一定顺序 */
        
    背景颜色的半透明
        {
            background: rgba(0, 0, 0, 0.3);
            }
        /* 最后一个参数是ALPHA透明的取值在0-1之间 */
        习惯性的把最后一个0去掉 写成.3
        盒子背景色半透明，里面内容不会半透明

盒子模型
    border  边框
        border-width: 5px; /* px作为单位 */
        border-style: solid;  实线边框
                      dashed; 虚线边框
                      dotted; 点线边框
        border-color: 
        border-collapse: collapse;/*细线边框单元格重叠边框细化*/
        复合写法 border：5px solid pink;
        边框分开写法：border-top/bottom:   ;

    content 内容

    padding 内边距 内容和边框距离 
    /*会增加盒子的大小 合理运用：不设置盒子width 直接设置padding相同，达到撑开盒子而两个字，三个字四个字盒子的美观*/
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding属性
            padding: 5px              /* 上下左右都是5px； */
            padding: 5px 10px;        /* 上下5px，左右10px */
            padding: 5px 10px 20px;   /* 上是5px,左右10px,下20px */
            padding: 5px 10px 20px 30px;  /* 上5 右10 下20 左30（顺时针） */
    margin  外边距 盒子盒子之间的距离
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
        margin-bottom: 20px; 
        margin属性
            margin: 5px;              /* 上下左右都是5px； */
            margin: 5px 10px;        /* 上下5px，左右10px */
            margin: 5px 10px 20px;   /* 上是5px,左右10px,下20px */
            margin: 5px 10px 20px 30px;  /* 上5 右10 下20 左30（顺时针） */
        让块级盒子水平居中
            /* 1.盒子必须指定width
               2.盒子左右设置为auto
               margin: 0 auto;       */     
        嵌套元素垂直外边距的塌陷问题
            对于两个嵌套关系的元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值
            解决方案： 给父元素定义一个上边框
                      可以为父元素定义内边距
                      可以给父元素添加  overflow: hidden;

    清除网页元素内外边距
        网页具有默认的内外边距，因此布局前先清除网页元素内外边距
        * {
            margin:0;
            padding: 0;
        }

圆角边框
    border-radius: 50px;
        圆角矩形设置成矩形高度的一半
    border-radius: 50%;
        设置成正方形的一半可以变成一个整圆
        border-top-left-radius 左上角
        border-top-right-radius 右上角
        border-bottom-right 右下角
        border-bottom-left-radius 左下角
盒子阴影
    box-shadow: ;
        （必需）水平阴影的位置
        （必须）垂直阴影的位置
        （可选）模糊距离（影子虚实）
        （可选）阴影的尺寸
        （可选）阴影的颜色
        （可选）外部阴影 inset内阴影  默认为outset ！不可写
       /* 按顺序填写 */
文字阴影    
    text-shadow: ;
        （必需）水平阴影的位置
        （必须）垂直阴影的位置
        （可选）模糊距离（影子虚实）
        （可选）阴影的颜色
       /* 按顺序填写 */

浮动（float）
       { 
           float: left;
            }
    用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
    /* 准则    多个块级元素纵向排列用     标准流
               多个块级元素横向排列的用   浮动 */
    浮动特性
        1.浮动元素会脱离标准流
            脱离标准流的控制（浮）移动到指定位置（动）/*脱标*/
            浮动的盒子不再保留原先的位置
            /* （未加浮动盒子与浮动盒子叠加现象） */
        2.浮动的元素会一行显示并且元素顶部对齐
            如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且 顶端排列对齐
            /* 浮动的元素是相互贴靠在一起的如果父级宽度装不下这些浮动盒子，多出的盒子会另起一行对齐 */
        3.浮动的元素会具有行内块元素的特性
            /* 如果行内元素有了浮动，则不需要转换块级/行内块元素就可以  直接设置高度宽度 */
    为了约束浮动元素的位置
            /* 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置 */
    
    清除浮动（*父盒子不方便给高度的情况）
        清除浮动之后，父级会根据浮动的盒子自动检测高度，不影响下面标准流
            选择器{
                clear: both;  /*同时清除左右两侧浮动的影响*/
                     : right;
                     : left;
            }
        方法: 1.额外标签法
                    在浮动元素末尾添加一个空标签
                        <div style= "clear:both"></div>
                        /* 添加的必须是块级元素 */
                    优点: 通俗易懂,书写方便
                    缺点: 添加许多无意义的标签,结构性差
              2.父级添加overflow属性
                    {
                        overflow: hidden;
                    }
                 /* 通过给父级添加overflow 属性设置hidden / auto / scroll  */
                 优点: 代码简洁
                 缺点: 无法显示溢出部分
              3.父级添加after伪元素 （重点）
                    .clearfix:after {
                        content: " ";
                        display: block;
                        height: 0;
                        clear: both;
                        visibility: hidden;
                    }
                    .clearfix {
                        *zoom: 1; /*IE6 7 版本专有*/
                    }
                优点: 没有增加额外标签,结构更简单
                缺点: 照顾地版本浏览器
              4.父级添加双伪元素 （重点）
                    .clearfix::before,
                    .clearfix::after {
                        content:" ";
                        display:table;
                    }
                    .clearfix::after{
                        clear: both;
                    }
                    .clearfix {
                        *zoom: 1;
                    }
                    优点：代码简洁
                    缺点：照顾低版本浏览器

定位
    /* 让盒子自由的在某个盒子内移动位置或者固定到屏幕中的某个位置并且可以压住其他的盒子 */
        定位= 定位模式 + 边偏移
    边偏移  top: 80px;
        top  bottom left right 

    定位模式
            行内元素添加绝对、固定定位，可以直接设置高度和宽   /* 脱标 */
            块级元素添加绝对、固定定位，如果不给高度或者宽度，默认大小是内容大小
            绝对定/固定定位会完全压住标准流的所有内容，浮动元素不同，只会压住他下面标准流的盒子，不会压住标准流盒子里面的文字

        position 属性
            static  静态定位（了解）
                默认的定位方式，无定位的意思
                静态定位按照标准流特性摆放位置， /* 没有边偏移 */

            relative  相对定位（重要）
                移动位置时，是相对于它原来的位置来走的 /* (参照自己原来的位置) */
                原来标准流的位置继续占有，后面的盒子依然以标准流的方式对它 /*不脱标,继续保留原来位置*/
                /* 用来限制绝对定位的 */

            absolute  绝对定位（重要）
                /* 移动位置时，相对于祖先元素移动位置的 */
                如果没有祖先元素/祖先元素没有定位，则以浏览器为参考点
                祖先元素有定位，则最近一级的有定位祖先元素为参考点
                绝对定位不再占有原先的位置  /*脱标*/
                /*   子绝父相 （父元素需要占有位置，子元素不需要占有位置）  */
                
                    加了绝对定位的盒子不能通过margin: 0 auto;水平居中/垂直居中
                        *算法：left: 50% 让盒子左侧移动到父级元素的水平中心位置
                            再往左走 margin-left: -100px;让盒子向左移动自身宽度的一半
                            /* 活的居中随着浏览器大小改变也居中 */

            fixed 固定定位（重要）
                固定到浏览器可视窗口的某个位置
                    /* 以浏览器的可视窗口为参照点移动元素 */
                    /* 和父元素没有任何关系 */
                固定定位不占用原先位置

                    盒子固定在版心右侧
                        让固定定位的盒子left 50%走到浏览器可视区一半的位置
                        让固定定位的盒子margin-left 版心宽度的一半
            
            sticky 粘性定位(了解)
                 /*相对定位和固定定位的混合*/
                 以浏览器可视窗口作为参照点移动元素
                 占有原先的位置
                 必须添加 top  bottom left right 其中一个才有效
                 /* 距离可视区域top: 0px;时变成固定定位滑动 */
                 兼容性差，IE浏览器不支持

    定位叠放次序
        z-index 控制定位盒子的前后次序（z轴）
        z-index: 1;数值可以正整数，负整数，0，数值越大，盒子越靠上
         /* 如果值一样，后来者最上*/
         /* 默认是auto ！！！不能加单位！！！！   只有定位的盒子有这个属性*/

显示和隐藏
    让一个元素在页面中隐藏起来或隐藏起来
        1.display 显示隐藏*  /* 设置一个元素如何显示 */
            display none;  隐藏对象
            display block; 显示对象/转换为块级元素
            /* 隐藏位置之后，不在占有原来的位置 */

        2.visibility 显示隐藏
            visibility: visible; 元素可视
            visibility: hidden;  元素隐藏
            /* 隐藏之后继续占有原来的位置 */

        3.overflow 溢出显示隐藏
            overflow: visible; 溢出显示（默认）
            overflow: hidden;  溢出隐藏
            overflow: auto;    溢出的才显示，不溢出不显示滚动条
            overflow: scroll;  溢出，不溢出都显示滚动条
高级用法

    精灵图
        将网页中的一些小的图片整合到一张大的图片，针对于一些小的背景图片（不用于产品类图片）
        /* 有效的减少服务器接收和发送请求的次数，提高页面加载速度 */
        通过 background-position: x y;实现
        /* 网页坐标系中往上往左走为负值  （基本为负值） */
        缺点：图片文件比较大，图片本身放大和缩小会失真，一旦图片制作完成想要更换十分复杂

    字体图标iconfont
        /* 对小图标的技术提升和优化，样式结构比较简单的图标 */
        优点：比图片小，本质是文字，可以随意变换颜色产生阴影，透明效果，兼容性强
        下载字体图标：icmoon字库，阿里iconfont字库
        
        将fonts文件夹放到页面根目录下
        字体声明
        用特殊字体符号放入标签
            指定字体，font-family:    ;
        字体图标追加selection.json文件，再重新下载

    CSS三角做法
        {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-right-color: pink;
        }
        宽，高为0的盒子，将三个边改成透明

    CSS用户界面样式
        鼠标样式：
            li {
                cursor: pointer; 小手
                cursor: default; 小白/* 默认 */
                cursor: move; 移动
                cursor: text; 文本
                cursor: not-allowed; 禁止
            }
        轮廓线：outline: none;
                取消表单轮廓线
                
        防止拖拽文本域
                textarea {
                    resize: none;
                }

    vertical-align: 属性应用
        用于设置图片或者行内块元素和文字的垂直对齐
        /* 只针对于行内元素或者行内块元素有效 */
            baseline 元素放在父元素的基线  （默认）
            top    元素的顶端于行中最高元素的顶端对齐
            middle 此元素放置在父元素的中部
            bottom 元素顶端于行中最低的元素顶端对齐

        解决图片底部有个空白缝隙（默认为基线对齐）
    
    溢出文字用省略号显示
        单行文本溢出省略号显示
            /* 先强制一行内显示文本 */
            white-space: nowrap; 强制一行内显示
                       : normal; (默认)自动换行
            /* 溢出部分隐藏 */
            overflow: hidden;
            /* 文字溢出时用省略号显示 */
            text-overflow: ellipsis;
        
        多行文本省略号显示（了解）
            有较大的兼容性问题，适用于webkit浏览器或者移动端  ie不起效果
            overflow: hidden;
            text-overflow: ellipsis;
             /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制一个块元素的显示文本行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒子对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
    布局小技巧
        margin 负值应用
            浮动盒子边框重叠问题
            margin-left: -1px;

        鼠标经过时 显示盒子被压住时
            如果盒子没有定位，鼠标经过添加相对定位即可
            如果盒子都有定位，则修改z-index：级别;
        
        文字围绕浮动元素
            左侧图片，右侧文字时，给左侧图片浮动即可
        
        行内块巧妙运用
            给行内块元素增加 text-align: center;
            里面所有行内块元素居中显示，并且有边距不用设置margin
                
    CSS三角强化
        设置一个半梯形（秒杀原价与秒杀价对比框）
        {
        width: 0;
        height: 0;
        border-top: 100px solid transparent;
        border-right: 50px solid blue;
        border-left: 0 solid #000;
        border-bottom: 0 solid #000;
            }
        /* 不设置高宽的盒子变为四个三角形，将下三角和左三角变为0，则上三角右三角占据
        上三角设置更高，往下突变成一个长方形，再设置上三角为透明得到一个长方形三角块 */
    
    CSS初始化
        /* 每个网页都要先进行CSS初始化保证兼容性 */
            * {
                margin: 0;
                padding: 0;/* 把所有标签内外边距清零 */
            }
            
            em,
            i {
                font-style: normal; /* 斜体文字不倾斜 */
            }
           
            li {
                list-style: none;  /* 去掉li的小圆点 */
            }
          
            img {
                border: 0;
                vertical-align: middle; /* 照顾低版本浏览器，如果图片外面包含了链接会有边框问题
                                         取消图片底侧有空白间隙问题 */
            }

            button {
                cursor: pointer; /* 鼠标经过按钮时变成小手 */
            }
           
            a {
                color: #666;
                text-decoration: none;
            }

            a:hover {
                color: blued;
            }

            button,
            input {
                font:
            }

            body {

            }

            .clearfix {
                清除浮动
            }

CSS3新特性
    选择器
        属性选择器（权重为10）
        /* 根据元素特定属性来选择元素，可以不借助类/id选择器 */
            1.选择具有att属性的E元素
            E[att] {

            }
            2.选择具有att属性且属性值等于val的E元素
            E[att="val"] {

            }
            3.匹配具有att属性且值以val开头的E元素
            E[att^="val"] {

            }
            4.匹配具有att属性且值以val结尾的E元素
            E[att$="val"] {

            }
            5.匹配具有att属性且其中含有val的E元素
            E[att*="val"] {

            }

        结构伪类选择器
            /* 主要根据文档的结构来选择器元素，常用于父级选择器里面的子元素 */
               /* E元素里面的第一个child */
                    E:first-child {

                    }

                /* E元素里面的最后一个child */
                    E:last-child {

                    }
                /* E元素里面的第n个child */    
                    E:nth-child(n) {

                    }   n为数字，就是选择第n个子选择器
                        n为关键字 even偶数，odd奇数
                        n为公式(字母只能是n，2n+1...)，n从0开始 

                /* 指定E类型的第一个 */
                    E:first-of-type {

                    }
                /* 指定E类型的最后一个 */
                    E:last-of-type {

                    }
                /* 指定E类型的第n个 */
                    E:nth-of-type(n) {

                    }
            区别:  E:nth-child(n)执行时先去找第n个孩子然后看是否和E匹配
                  E:nth-of-type(n)执行时先看指定的元素，匹配E，再根据E找第n个孩子
        
        伪元素选择器
            /* 装饰类的小东西 */
            div::after{
                content:" ";
            }
                ::before 在元素内部的前面插入内容（放在父元素内容前）
                ::after  在元素内部的后面插入内容（放在父元素内容后）
            创建一个元素，但属于 行内元素* （伪元素在文档树中是找不到的，所有称为伪元素）
            必须有content属性
            /* 和标签选择器一样，权重为1 */

    盒子模型
            box-sizing: border-box;
            padding和border就不会撑大盒子（前提是不超过width）
        传统盒子模型：
            box-sizing: content-box;
            宽度= width+border+padding
            PC端如果完全需要兼容性，我们就用传统

        
    图片模糊处理
        css3滤镜
            filter: blur(5px);模糊处理（数值越大越模糊）
                    其他函数查阅；
    计算盒子宽度
        calc函数
             width: calc(100%-30px);/*  /*-+计算   */ 设置子盒子永远比父盒子小30px;

    CSS3过渡（重点）
        /* 简单动画，从一个状态到另一个状态
        和hover搭配使用 */
            div:hover {
                width:400px;
            }
            div {
                transition: width 0.5s;
                }
        transition: 要过度的属性 花费时间  运动曲线  何时开始；
            宽度，高度，背景颜色，内外边距，all（全部属性）
            时间s
            曲线默认ease 可省略
            默认0        可省略
            /* 谁做过度给谁加transition */
        
    CSS3 transform 2D转换 
        /* 实现位移旋转，缩放等效果 */

        1.translate 位移
            {
                transform: translate(x, y);
            }
        /* 优点 ：
            不会影响其他元素的位置
            translate中的百分比单位是相对于元素自身的translate(50%,50%);
            对行内标签没有效果      */
            配合定位实现水平垂直居中
            {
                position : absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

        2.rotate 旋转
            {
             transform: rotate(度数deg);
             }
             正值顺时针，负值逆时针
             旋转中心点是元素的中点
                    设置转换中心点：
                    {
                        transform-origin: x y; /*用空格隔开*/
                    }
                可以给像素，可以给方位名词
         
        3.scale 缩放
            {
              transform: scale(x,y);
            }
            填倍数，不跟单位  2放大， 0.5缩小
            可以设置转换中心点缩放，而不影响其他盒子
                {
                    transform-origin: x y; /*用空格隔开*/
                }
            综合性写法顺序：{
                    transform: translate() rotate( ) scale();
                     }
            /* 其顺序会影响转换的效果，位移一定要放到最前面  */
         
    动画部分 animation
        通过设置多个节点来精确控制一个或一组动画，实现更多控制，连续自动播放等效果
        定义动画：    @keyframes mov(动画名字){
                        0 {
                            transform: translate(0px); /*开始状态*/
                        }
                        100% {
                            transform: translate(1000px);/*结束状态*/
                          
                        }
                    }
        调用动画：   div {
                animation-name: mov;
                animation-duration: 10s;/*持续时间 单位为s 秒*/
            }
            /* 百分比为时间的百分比 */
        动画属性：
            动画名字
                animation-name: ; 
            动画持续时间
                animation-duration: 10s; 
            动画运动曲线
                animation-timing-function: ease;  默认 以低速开始然后加快，在结束前变慢
                                           linear 匀速
                                           ease-in 以低速开始
                                           ease-out 以低速结束
                                           ease-in-out 以低速开始和结束
                                           steps（）  指定时间函数中的间隔数量（步长）
            动画何时开始
                animation-delay: 0s; 
            动画重复次数，
                animation-iteration-count: ;
                                infinite 无限的
            动画是否逆向播放
                animation-direction: normal(默认);   
                                   : alternate(反方向)
            动画结束后的状态
                animation-fill-mode: forwards; 保持结束状态
                                   : backwards 返回起始状态（默认）
            鼠标放上去是否停止
                animation-play-state: running(默认);继续
                                    : paused; 停止
            简写：
            animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始或结束状态；
                /* 前两个不能省 */
                简写属性不包含 animation-play-state: paused;经常和鼠标经过配合使用
                第二组动画用逗号，隔开
        
    CSS3 3D
            /* 物体后面遮挡看不见
            x 轴水平向右 右正左负
            y 轴水平向下 下正上负
            z 轴垂直屏幕 外正里负 */
        3D转换
            3D移动
                translateX();
                translateY();
                translateZ();
                translate3d(x,y,z);
             /* Z借助透视才能看到 */

        3D旋转
            rotate3d
            沿着x,y,z旋转
            {
                transform: rotate3d(x,y,z)单位deg
                           rotateX()
                           rotateY()
                           rotateZ()
            }
            /* 左手准则。拇指指向正方向，手指弯曲的方向为旋转正方向 */

        透视（视距）
            *透视写在被观察元素的父盒子上面
                {
                    perspective:500px;
                }
            在2D平面产生近大远小的视觉立体
            /* 视觉点越近电脑平面成像越大，越远越小 */
            
            父盒子固定perspective 改变不同子盒子的Z搭配使用

        3D呈现
            控制子元素是否开启三维立体环境
             {
                transform-style: flat;(默认不开启)
                               : preserve-3d;开启
            }

    浏览器私有前缀            
        -moz- : 火狐浏览器私有属性
        -ms- :  ie浏览器私有属性
        -webkit- : safari chrome私有属性
        -o-: Opera 私有属性
       提倡写法：
            {
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                -o-border-radius: 10px;
                border-radius: 10px;
            }

    盒子透明度： 
          { opacity:  1;越小越透明0.2
         }

移动端
    二倍图，多倍图
        提高图片质量，解决在高清下的模糊问题
        准备的图片，比实际需要的大小，大两倍，这种方式就是二倍图
            {
                background-size: 图片宽度  图片的高度;
                    /* 只写一个参数，肯定是宽度，高度会等比例缩放 */
                    单位还可以跟%，是相对于父盒子的
                    :cover; 图片完全覆盖盒子，可能有部分背景图片显示不全
                    :contain; 高度宽度等比拉伸。当高度或者宽度一边达到线宽，就不再拉伸，可能会有部分空白
            }
            二倍图
            div {
                width: 50px;
                height: 50px;
                background: url(apple100.jpg) no-repeat;
                background-size: 50px 50px;
            }
            二倍精灵图 
                在firework精灵图等比例缩放为原来的一半
                之后根据大小测量坐标
                代码里面background-size 也要写精灵图原来宽度的一半
    主流方案
        单独制作移动端页面（主流）
            1.流式布局（百分比布局）
            /* 不用固定宽度，而用百分比形式随着页面大小在范围内伸缩 */
                {
                    width: 50%;
                    max-width 最大宽度
                    min-width 最小宽度
                }

            2.flex弹性布局（强烈推荐）
                /* 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 */
                给父盒子设置的：
                    设置为flex：
                        display: flex;

                    设置主轴的方向：
                        /* 元素是跟着主轴排列的 */
                        flex-direction: row;    从左到右（默认）   
                                        row-reverse; 从右到左
                                        column;   从上到下
                                        column-reverse;    从下到上
                            /* 默认的主轴方向为x轴方向水平向右 ，那么y 为侧轴 */

                    设置主轴上的子元素排列方式 
                        /* 定义了子项目在主轴上的对齐方式      */
                        justify-content: flex-start;   默认 从头部开始排列*
                                         flex-end;    从尾部开始排列
                                         center;     主轴居中对齐*
                                         space-around; 平分剩余空间
                                         space-between;   先两边贴边，再平分剩余空间*

                    设置子元素是否换行 
                        /* 默认的子元素是不换行的，如果装不开会缩小子元素的宽度                      */
                        flex-wrap: nowrap;  默认，不换行
                                   wrap     换行  

                    设置侧轴上的子元素排列方式（多行）
                        /* 默认的侧轴排列方向是y轴方向水平向下 */
                        align-content: flex-start; 在侧轴的头部开始排列(默认)
                                       flex-end;  在侧轴的尾部开始排列
                                       center;  在侧轴的中间显示
                                       space-around; 子项在侧轴平分剩余的空间
                                       space-between; 子项在侧轴先分布在两头，再平分剩余空间
                                       stretch; 设置子项元素平均高度平分父元素高度

                    设置侧轴上的子元素排列方式（单行）
                        align-items: flex-start; 从上到下(默认)
                                     flex-end; 从下到上
                                     center;  挤在一起居中垂直居中
                                     stretch; 拉伸  子盒子不要给高度 
                    复合属性
                        /* flex-direction   flex-wrap  */
                        flex-flow: row wrap;           

                    父盒子设定flex后，子元素的 float/ clear /vertical-align /属性失效
                    子容器可以横向排列，纵向排列

                给子项设定的
                    flex属性
                    /* 定义子项分配剩余空间用flex表示占多少份 1分全吃  */
                    {
                        flex: 1(number);
                    }
                    可以写百分比相对于父级来说的

                    align-self 
                    /* 控制子项自己在侧轴上的排列方式 */

                    order
                    定义项目的排列顺序（默认0）越小越往前
                    {
                        order: -1;
                    }

            3.less+rem+媒体查询布局*

                rem基础
                    rem单位
                        /* （root em）是一个相对单位，类似与em，em是父元素字体大小，rem是相对于html元素的大小 */
                        通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

                        页面元素rem = 页面元素（px）/ （ 屏幕宽度/ 划分的份数（15/20））
                        屏幕宽度/ 划分的份数就是 html font-size 的大小
                    媒体查询（Media Query）
                        /* 针对不同的屏幕尺寸设置不同的样式 */
                            @media mediatype and|not|only (media feature){
                                CSS-Code;
                            }
                            mediatype 媒体类型
                                    all  用于所有设备
                                    print 用于打印机预览
                                    screen 用于电脑屏幕，平板电脑，智能手机等

                            关键字 and  将多个媒体特性连接到一起， 相当于 且
                                not  排除某个媒体类型，相当于 非  可以省略
                                only 指定某个特定的媒体类型    可以省略

                            media feature 媒体特性 必须有小括号包括
                                （width）
                                    (max-width: ;)
                                    (min-width: ;)
                                    包含等于
                        引入资源
                            不同的媒体使用不同的 stylesheet
                            <link rel="stylesheet" href=" 0" media="screen and (max-width="640px")">
                    
                    less基础
                        /* CSS扩展语言，CSS预处理器（Sass Less Stylus）
                        新建.less文件，在里面书写less语句 */
                首先选一套标准尺寸 750
                用屏幕尺寸除以 划分的份数，等到html里面文字大小
                REM = 页面元素在750px  / html 里面的文字大小
              
                rem配flexible.js
                    不需要不同屏幕的媒体查询，JS做了处理
                    直接划分为10等分
                    要做的是直接确定当前设备HTML文字大小
                    页面元素rem = 页面元素px/（屏幕/10）  
                    在插件里设置HTML文字大小，自动转换，只需设置一个@media screen and (max-width: ""){
                        
                                                                }   
                    在HTML body中引用JS文件
                        <script src="./flexible.js"></script>
            4.混合布局
            响应式页面兼容移动端（其次）
            /* 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
            在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局样式变化 */
                超小屏幕(手机)  < 768px          设置100%
                小屏设备(平板)  >=768px <992px   750px
                中屏设备(电脑)  >=992px <1200px  970px
                宽屏设备(大电脑)  >=1200px       1170px
                   
            bootstarp前端开发框架
                /* 创建文件夹结构，创建html骨架结构，引入相关的样式文件，书写内容 */
                栅栏系统
                    行必须放到contain布局容器里面
                    实现列的平均划分必须要给列添加 类前缀
                    .col-xs- 超小    
                    .col-sm- 小
                    .col-md- 中
                    .col-lg- 大
                    /*后接份数，整行一共十二份 相加等于十二能占满，相加少于十二不占满有空白，大于12多余的那一列会另起一行显示*/
                    多类名去写  class="col-md-4 col-sm-6"
                    每一列左右都有一个15px padding值
                  列嵌套
                    列嵌套最好加一个行，可以去掉父元素的padding值，高度和父级一样高
                  列偏移
                    col-md-offset-份   右偏移份数
                  列排序
                    col-md-push-份   推到右边
                    col-md-pull-份   拉到左边
                  响应式工具
                    利用媒体查询工具，针对不同设备的展示或者隐藏内容
                    .hidden-xs  隐藏超小
                    .hidden-sm  隐藏小
                    .hidden-md  隐藏中
                    .hidden-lg  隐藏大
                    与之相反的是 visible-  可视
            /* 缺点：制作麻烦，花费很大精力去调试兼容性问题 */
    swiper使用
        下载需要的CSS和.js文件
        官网找到类似案例，复制HTML结构，CSS样式，JS语法
        根据需求定制修改模块

    移动端初始化
        normalize.css 引入

    盒子模型 box-sizing : border-box;

    特殊样式
        链接点击高亮需要我们清除
            a { 
                -webkit-tap-highlight-color: transparent;
            }
        在移动端浏览器默认外观在ios上加上这个属性才能给按钮和输入框自定义样式
            input {
                -webkit-appearance: none;
            }
        禁用长按页面时弹出的菜单
        {
            img,a {
                -webkit-touch-callout: none;
            }
        }

    移动端背景渐变
        必须添加浏览器私有前缀-webkit-
        {
            background: -webkit-linear-gradient(left（默认top，方位名词）, red, blue);
        }